<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>海数云</title>
    <link rel="stylesheet" href="/static/plugs/bootstrap/bootstrap.min.css">
        <link rel="stylesheet" href="/static/css/base.css">
    <link rel="stylesheet" href="static/css/normalize.css">
    <script src="/static/plugs/jquery/jquery-3.1.1.min.js"></script>
    <script src="/static/plugs/bootstrap/jquery.slim.min.js"></script>
    <script src="/static/plugs/bootstrap/bootstrap.bundle.min.js"></script>
    <style>
        /*总体布局*/
        .index-bg{
            width: 100%;
            height:100%;
            /*background: url("static/images/login-bg.jpg") fixed no-repeat;*/
            background: #F2F2F2;
            background-size:cover;
            position: fixed;
            opacity: 1;
            z-index: -1;
        }
        .wrap{
            width: 1440px;
            height: 800px;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            /*border:1px red solid;*/
        }
        .login-wrap{
            width: 540px;
            height: 560px;
            display: flex;
            /*justify-content: center;*/
            flex-direction: column;
            align-items: center;
            background: #FFFFFF;
            .login-title-wrap{
                width: 540px;
                height: 120px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                background: #b4bbc5;
                .login-title{
                    width: 540px;
                    display: flex;
                    justify-content: space-around;
                    margin-bottom: 20px;
                    font-weight: bold;
                    font-size: 24px;
                }
            }
            .login-account-wrap{
                padding: 20px 0;
                display: flex;
                justify-content: center;
                flex-direction: column;
            }
            .recommend-reason{
                display: flex;
                flex-direction: row;
                align-items: center;
            }
            .recommend-reason textarea{
                margin: 20px 0;
                width: 400px;
                height: 200px;
                padding: 10px;
            }
        }
            .login-btn{
                width: 480px;
                height: 60px;
                margin-top: 20px;
                border-radius: 5px;
                background: #8B9CAC;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 24px;
                color:#FFFFFF;
            }

    </style>
</head>
<body>
<div class="index-bg"></div>
<div class="wrap">
    <div class="login-wrap">
        <div class="login-title-wrap">
            <div class="login-title">推荐Ta</div>
        </div>
        <div class="login-account-wrap">
            <div>被推荐人：<span>张三丰</span></div>
            <div class="recommend-reason">推荐语：
                <textarea></textarea>
            </div>
            <div class="login-btn">推荐</div>
        </div>
    </div>
</div>
<script>

</script>
</body>
<script>

</script>
</html>